<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,user-scalable=no" name="viewport">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
	<meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta http-equiv="expires" content="0"> 
	<title>gold test</title>
	<style>
	html,body{position: relative;width: 100%;height: 100%;overflow: hidden;margin: 0;}
	
	.anim{display: none; position: fixed;top: 50%;left: 50%; height: 0;width: 60px; text-align: center; z-index: 1;}
	.gold{position: absolute;top: -300px;left: 50%;margin-left: -30px;  width: 100%;z-index: 1;}
	.shadow{position: absolute;top: 80px;left: 50%; width: 0;opacity: 0;}

	.anim1{margin-left: -30px;z-index: 99;}
	.anim2,.anim3{width: 40px;margin-top: -16px;}
	.anim2 .gold,.anim3 .gold{margin-left: -20px;margin-top: 10px;}

	.anim3{margin-left: 20px;}
	.anim2{margin-left: -60px;}
	
	</style>
</head>
<body>



	<div class="anim anim1">
		<img class="gold" src="gold.png" >
		<img class="shadow" src="shadow.png" >
	</div>

	<div class="anim anim2">
		<img class="gold" src="gold.png" >
		<img class="shadow" src="shadow.png" >
	</div>

	<div class="anim anim3">
		<img class="gold" src="gold.png" >
		<img class="shadow" src="shadow.png" >
	</div>
	<div >
		<audio src="ppc_coins_drop.mp3" id="audio"></audio>
	</div>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
	<script src="test.js"></script>
</body>
</html>